<template>
	<div class="confirm-add">
		<right-header :header-name="headerName"></right-header>
			<el-breadcrumb separator="/" class="breadcrumb">
		  	<el-breadcrumb-item :to="{ path: '/waitPort/addPatients' }">添加患者</el-breadcrumb-item>
		  	<el-breadcrumb-item>选择添加患者</el-breadcrumb-item>
		  	<el-breadcrumb-item>确认添加</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :model="form" label-width="80px" label-position='left'>
		<div class="infor-box">
			<div class="base-infor">
				<div class="base-title">
					<span>name</span>
					<span>sex</span>
					<span>age</span>
				</div>
				<div class="base-main">
					<div class="main-item">
						<div class="item">
							<span>就诊卡号</span>
							<span>16780454</span>
						</div>
						<div class="item">
							<span>病历号</span>
							<span>13678098</span>
						</div>
						<div class="item">
							<span>身份证</span>
							<span>3102241111900</span>
						</div>
					</div>
					<div class="main-item">
						<div class="item">
							<span>诊断</span>
							<span>慢性肾病5期</span>
						</div>
						<div class="item">
							<span>伴随疾病</span>
							<span>糖尿病</span>
						</div>
						<div class="item">
							<span>替代治疗方式</span>
							<span>血液透析(HD)</span>
						</div>
						<div class="item">
							<span>既往移植史</span>
							<span>无</span>
						</div>
					</div>
				</div>
				<div class="base-select">
						<div class="select-item">
						<div class="item">
							 <el-form-item label="联系方式1">
							    <el-input size='small' v-model='form.phone1'></el-input>
							  </el-form-item>
						</div>
						 <div class="item">
							 <el-form-item label="联系方式2">
							    <el-input size='small' v-model='form.phone2'></el-input>
							 </el-form-item>
						</div>
						</div>
						<div class="select-item">
						<div class="item">
							 <el-form-item label="登记时间">
							       <el-date-picker type="date" placeholder="选择日期"  style="width: 100%;" size='small' v-model='form.data'></el-date-picker>
							  </el-form-item>
						</div>
						 <div class="item">
							 <el-form-item label="居住地址">
							    <el-cascader
								    :options="options"
								     v-model="form.selectedOptions"
								    >
								  </el-cascader>
							 </el-form-item>
						</div>
						</div>
							
				</div>
			</div>
			<div class="other-box">
				<div class="title">
					*HLA配型信息
				</div>
				<div class="hla-main">
					<div class="hla-item">
						<span>人类白细胞抗原A</span>
						<span>A 12</span>
						<span>A 12(21)</span>
					</div>
					<div class="hla-item">
						<span>人类白细胞抗原B</span>
						<span>B 21</span>
						<span>B 21</span>
					</div>
					<div class="hla-item">
						<span>人类白细胞抗原DR</span>
						<span>DR 15</span>
						<span>DR 16</span>
					</div>
				</div>
			</div>
			<div class="other-box">
				<div class="title">
					*术前检查
				</div>
				<div class="hla-main">		
					<v-check @ceshi='ceshi1' :checked='form'></v-check>
				</div>
			</div>
			<div class="other-box">
				<div class="title">
					术前四项
				</div>
				<div class="four">
				<div class="four-item">
					<div>
						<span>乙肝表面抗原</span>
						<span>隐性</span>
					</div>
					<div>
						<span>丙肝肝炎抗体</span>
						<span>阳性</span>
					</div>
				</div>
				<div class="four-item">
					<div>
						<span>人免疫缺陷病毒抗体</span>
						<span>隐性</span>
					</div>
					<div>
						<span>梅毒螺旋体抗体</span>
						<span>隐性</span>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="button">
			<el-form-item label-width="0px">
			<el-button type="primary" @click='submit(form)'>确认添加</el-button>
			</el-form-item>
		</div>
		</el-form>
	</div>
</template>
<script>
import rightHeader from '@/components/rightHeader'
import check from '@/views/waitPort/children/check'
import addressData from '@/assets/json/address4.json'	
export default {
	data() {
		return {
			options:[],
			headerName:'等待肾源患者',
			form:{
				data:new Date(),
				phone1:'',
				phone2:'',
				selectedOptions:['浙江省','杭州市','下城区','石桥街道'],
				datapra:new Date(),
				antibodyone:'阳性',
				antibodyone1:'阴性'
			}		
		}
	},
	created() {
		this.options=this._address(addressData);
	},
	mounted(){
		
	},
	methods: {
		submit(form){
			console.log(form);
		},
		ceshi1(data){
			console.log(data);
			 this.form.antibodyone = data.antibodyone;
			 this.form.datapra =data.datapra;
			 this.form.antibodyone1 =data.antibodyone1;
		},
		_address(data) {
			let temp = []
			for(let k in data) {
				let obj={};
				if(isNaN(k)){
					obj.value=k;
					obj.label=k;
				}else {
					obj.value = data[k];
					obj.label =data[k];
				}					
				if(this._type(data[k]) === 'object' || this._type(data[k]) === 'array') {
					obj.children =this._address(data[k])
				}
				temp.push(obj)
			}
			return temp
		},
		_type(value) {
			return Object.prototype.toString.call(value)
						 .replace(/(?:^\[object\s(.*?)\]$)/, '$1')
						 .toLowerCase()	
		}
	},
	components: {
		'right-header': rightHeader,
		'v-check':check
	}
}
</script>
<style lang='scss' rel='stylesheet/scss' scoped>
	.confirm-add{
		padding: 0 20px;
		.bread-crumbs{
			margin-top: 20px;
			margin-left:20px;
		}
		.infor-box{
			margin-top: 20px;
			margin-left: 20px;	
			.base-infor{
				padding: 10px;
				border:1px solid #E4E4E4;
				.title{
					span{
						&:nth-of-type(1){
							font-size: 18px;
							margin-right: 25px;
						}
					}
				}
				.base-main{
					padding-bottom: 40px;
					border-bottom: 1px solid #E4E4E4;
					.main-item{
						display: flex;
						padding-top: 15px;
						color:#5e6d82;
						.item{
							margin-right: 60px;
						}
					}
				}
				.base-select{
					padding-left: 50px;
					.select-item{
						display: flex;
						margin-top: 40px;
						form{
							
						}
						.item{
							width: 260px;
							display: flex;
							margin-right: 100px;
							.el-cascader{
								width: 300px;
							}
							span{
								display: inline-block;
							}
						}
					}
					
				}

			}
			.other-box{
				margin-top: 20px;				
				.hla-main{
					padding-left: 50px;
					padding-bottom:30px;
					border: 1px solid #f2f2f5;
					border-top: none;
					.hla-item{
						padding-top: 25px;
						span{
							margin-right: 100px;
						}
						&:nth-of-type(3){
							span{
								&:nth-of-type(1){
									margin-right: 75px;
								}
								&:nth-of-type(2){
									margin-right: 88px;
								}
							}
						}
					}
					
				}
				.el-form {
					padding-left: 50px;
					padding-top: 20px;
					border: 1px solid #f2f2f5;
					border-top:none;
				}
				.four{					
					padding:30px 0 30px 50px;
					border: 1px solid #f2f2f5;
					border-top: none;
					.four-item{
						padding-left:50px;
						display: flex;
						div{
							margin-right: 150px;
						}
						&:last-child{
							margin-top: 25px;
							div:nth-of-type(1){
								margin-right: 100px;
							}
						}
					}
				}
			}
		}
		.button{
			display: flex;
			justify-content:center;
			margin:10px 0 10px 20px;
		}
	}
</style>
